<template>
  <div class="root">
    <div class="bigBox">
      <div class="title_box"></div>
      <div class="center">
        <div class="space_left">
          <div class="left_title">
            <div class="left_title_center">
              <div class="left_icon">
                <svg
                  t="1652775460734"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="1298"
                  width="24"
                  height="24"
                >
                  <path
                    d="M192.032 631.402667V404.725333C192.032 228.330667 335.285333 85.333333 512 85.333333s319.968 142.997333 319.968 319.392v226.677334l60.608 121.013333c10.645333 21.237333-4.832 46.218667-28.618667 46.218667H160.042667c-23.786667 0-39.253333-24.981333-28.618667-46.218667l60.608-121.013333z m620.16 103.36l-40.842667-81.536a31.893333 31.893333 0 0 1-3.381333-14.282667V404.725333c0-141.12-114.602667-255.509333-255.968-255.509333S256.032 263.605333 256.032 404.725333V638.933333c0 4.96-1.162667 9.845333-3.381333 14.293334l-40.842667 81.525333h600.384z m-443.306667 152.32a31.893333 31.893333 0 0 1-4.149333-44.981334 32.032 32.032 0 0 1 45.056-4.138666A159.36 159.36 0 0 0 512 874.773333a159.36 159.36 0 0 0 102.186667-36.8 32.032 32.032 0 0 1 45.056 4.138667 31.893333 31.893333 0 0 1-4.16 44.981333A223.402667 223.402667 0 0 1 512 938.666667c-52.981333 0-103.2-18.453333-143.114667-51.594667z"
                    p-id="1299"
                    fill="#1296db"
                  ></path>
                </svg>
              </div>
              <div class="left_text">
                <span>消息中心</span>
              </div>
            </div>
          </div>
          <div class="msg_list">
            <ul>
              <!-- 使用组件跳转 -->
              <router-link
                :to="{ path: '/index/customerService/' + item.link }"
                v-for="(item, index) in msg_item_list[0].msg"
                :key="index"
              >
                <li
                  class="list_style"
                  :key="index"
                  @click="click_change(index)"
                >
                  <div class="sport">
                    <div class="small_div"></div>
                  </div>
                  <div
                    :class="[
                      change_index == index
                        ? 'list_style_box list_style_box_hover'
                        : 'list_style_box',
                    ]"
                  >
                    <a
                      ><el-badge :value="item.msg_num" class="item">
                        {{ item.msg_str }}
                      </el-badge>
                    </a>
                  </div>
                </li>
              </router-link>
            </ul>
          </div>
        </div>
        <div class="space_right">
          <div class="right_title">
            <div class="right_title_center">
              <div class="right_title_center_text">
                <span>{{ msg_item_list[0].msg[change_index].msg_str }}</span>
              </div>
            </div>
          </div>
          <div class="right_space_bottom">
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  components:{
    
  },
  data() {
    return {
      change_index: 4,
      msg_item_list: [
        {
          iteam_id: 1,
          msg: [
            {
              msg_str: "回复我的",
              msg_num: 1,
              link: "replymsg",
              hidden: false,
            },
            {
              msg_str: "@我的",
              msg_num: 0,
              hidden: false,
              link: "mine",
            },
            {
              msg_str: "收到的赞",
              msg_num: 12,
              hidden: false,
              link: "getassist",
            },
            {
              msg_str: "系统消息",
              msg_num: 0,
              hidden: false,
              link: "systemmsg",
            },
            {
              msg_str: "我的消息",
              msg_num: 12,
              link: "",
              hidden: false,
              link: "mymsg",
            },
            {
              msg_str: "私信",
              msg_num: 0,
              hidden: false,
              link: "privatemsg",
            },
          ],
        },
      ],
    };
  },
  methods: {
    click_change(index) {
      this.change_index = index;
    },
  },
};
</script>

<style>
.list_style_box_hover a {
  /* color: aqua !important; */
  color: #1296db !important;
}
.small_div {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* .right_space_bottom_center {
  width: 820px;
  height: 310px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 4px;
} */
.right_space_bottom {
  width: 100%;
  height: calc(100% - 62px);
  padding-top: 10px;
}
.right_title_center_text span {
  line-height: 42px;
  font-size: 16px;
  color: #8b8b8b;
}
.right_title_center_text {
  width: 1000px;
  height: 100%;
  margin: 0 auto;
}
.right_title_center {
  width: 1040px;
  height: 42px;
  background-color: #fff;
  margin: 0 auto;
  border-radius: 4px;
  /* 在盒子底部 */
  position: relative;
  top: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.right_title {
  width: 100%;
  height: 52px;
}
.el-badge__content.is-fixed {
  top: 19px;
  right: -5px;
}
.list_style a:hover {
  cursor: pointer;
  /* 改变a标签颜色 */
  color: #1296db;
}
.sport {
  width: 42px;
  height: 100%;
  float: left;
  position: relative;
}
.list_style_box a {
  color: #6b757b;
  /* 加粗 */
  font-weight: bold;
  font-size: 15px;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  line-height: 40px;
}
.list_style_box {
  width: 70%;
  height: 100%;
  float: right;
}
.list_style {
  width: 100%;
  height: 40px;
}
.public_list_item {
  line-height: 40px;
  text-align: center;
}
.left_text {
  width: auto;
  height: 100%;
  text-align: center;
  line-height: 64px;
  font-weight: bold;
  font-size: 14px;
}
.left_icon {
  width: 20px;
  height: 100%;
  float: left;
  /* 垂直居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.left_title_center {
  width: 70%;
  height: 100%;
  margin: 0 auto;
}
.left_title {
  width: 100%;
  height: 64px;
}
.space_right {
  width: 1060px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  float: left;
}
.space_left {
  width: 140px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  float: left;
}
.center {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
}
.bigBox {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background: url("@/assets/images/customer_service_img/background3.jpg")
    top/cover no-repeat fixed;
}
.root {
  width: 100%;
  height: 100%;
}
</style>